前言

上一篇提到了圖片的基本處理、放置、排版、裁切等等，今天會提到一些元件效果。主要會以圖片效果來呈現。

元件庫的使用

在先前的文章沒有提到元件庫如何使用，這邊補充一下。
在想要加入圖片或是其他元件時，可以點擊右上方加號。
選定元件後，拖曳到程式碼編輯的部分。

裁切效果

在上一篇有提到簡單的裁切效果。接著會提到一些其他效果。
上一篇所提到的 clip 效果：

.clipped()

圓角效果

cornerRadius 經常使用在圖片或是按鈕。

.cornerRadius(30)//數字可以改成其他參數

將 corner radius 放在最後，系統會依照藍色框線去裁切圓角

裁切特定圖形

.clipShape(Circle())
.clipShape(Rectangle())
.clipShape(RoundedRectangle(cornerRadius: 10))
.clipShape(Capsule())
.clipShape(Ellipse())

有以上這幾種預設的可以使用。
這邊的例子使用 Circle() 的部分

Image("01wi")
    .resizable()
    .scaledToFill()
    .frame(width:320,height: 220)
    .clipShape(Circle())
    .padding()

可以透過 .offset 來控制位移要顯示的圖片範圍。
上一張圖的太陽是靠近編編的，透過 .offset 將圖片移動。
讓太陽更靠近圖片中心。

.offset(x:-30,y:30)//往上30往左30

圖片陰影

.shadow(color: .red, radius: 5, x: 2, y: 3)

這邊用紅色展示效果比較清楚。

透明度

讓圖片變透明（參數從0-1）

.opacity(0.5)

效果還有許多種類，大家可以自己試試看。

效果也可以使用在文字、按鈕等等...

p.s 在加入修改器（modifier）時要注意順序問題，（例如：先填滿再裁切...）不同的順序會呈現不同效果。

今天的文章介紹就到這邊啦！大家如果喜歡可以按個讚～